<!--
 * @Description: CSS样式学习
 * @Author: rendc
 * @Date: 2025-04-29 09:43:03
 * @LastEditors: rendc
 * @LastEditTime: 2025-04-29 10:28:35
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS样式学习</title>
</head>
<style>
  div{
    /* font-size: 20px;
    font-weight:900; */
  }
  .myDiv{
    color: red;
  }
  #myDivId{
    color: blue;
  }
  /* 后代选择器 */
  /* div p{
    color: purple;
  } */
  /* 子代选择器 */
  div>p{
    color: purple;
  }
  /* 伪类选择器 */
  .btn{
    width: 108px;
    height: 45px;
    background-color: #4e6ef2;
    color:white;
    font-weight: 400;
    font-size: 17px;
    text-align: center;
    line-height: 45px;
    /* vertical-align: middle; */
    border-radius: 10px;
  }
  .btn:hover{
    background-color: #3856D3;
    cursor:pointer;
  }
</style>
<body>
  <!-- 伪类选择器 百度一下按钮 -->
  <div class="btn">百度一下</div>
  <div class="myDiv">
    myDiv类的div1
  </div>
  <div class="myDiv">
    myDiv类的div2
  </div>
  <div class="myDiv">
    myDiv类的div3
  </div>
  <div class="myDiv">
    myDiv类的div4
  </div>
  <div id="myDivId">
    id为myDivId的div1
  </div>
  <!-- id不要重复 -->
  <!-- <div id="myDivId">
    id为myDivId的div1
  </div> -->
  <div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <span>
      <p>4</p>
      <p>5</p>
      <p>6</p>
    </span>
  </div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <!-- 不建议这样使用 -->
  <i>斜体</i>
  <!-- 使用css控制 -->
  <div style="font-style: italic;">斜体</div>
  <span style="text-decoration:line-through;">原价：999</span>
  <span>现价：99</span>

  <div>
    颜色
    <div style="color: rgb(0, 255, 0);">rgb</div>
    <div style="color: rgba(0, 255, 0, 0.5);">rgba</div>
    <div style="color: #0000FF;">十六进制</div>
    <div style="color: #00F789;">十六进制缩写</div>
    <div style="color: #00FF99;">十六进制缩写</div>
    <div style="color: #0f9;">十六进制缩写</div>
    <div style="color: #0000FF00">十六进制透明</div>

  </div>
</body>
</html>